{% extends "../base/base.html" %}

{% block main %}
<div class="edit-page">
    <el-row :gutter="20">
        <el-col :span="6"> <el-input v-model="input" placeholder="请输入内容"></el-input></el-col>
        <el-col :span="6"><el-date-picker
                v-model="date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
        </el-date-picker></el-col>
        <el-col :span="6"> <el-button type="primary" @click="getList"> 确定</el-button></el-col>
    </el-row>
    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                prop="id"
                label="id">
        </el-table-column>
        <el-table-column
                prop="name"
                label="用户名称"
                width="180">
        </el-table-column>
        <el-table-column
                prop="phone"
                label="手机号">
        </el-table-column>
        <el-table-column
                prop="status"
                label="联系过">
            <template slot-scope="scope">
                ${scope.row.status==1?'否':'是'}
            </template>
        </el-table-column>
        <el-table-column
                prop="created_at"
                label="创建时间">
        </el-table-column>
        <el-table-column
                label="操作">
            <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" content="是否已联系过该用户" placement="top">
                    <i style="cursor: pointer" class="el-icon-edit" @click="changeStatus(scope.row)"></i>
                </el-tooltip>
            </template>
        </el-table-column>
    </el-table>
    <div class="pager">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="size"
                :page-sizes="[ 5, 10, 20]"
                layout=" prev, pager, next,sizes,total, jumper"
                :total="total">
        </el-pagination>
    </div>
</div>
{% endblock %}
{% block js%}
<script>
    new Vue({
    el: '#app',
    delimiters: ['${', '}'],
    data: function() {
      return {
            currentPage:{{page}},
            total:0,
            size:{{pagesize}},
            tableData:[],
              input:'',
                date:''
       }
    },
    created(){
      this.getList()
    },
    methods: {
      getList(){

        axios.get('/userlist/getList',
          {
            params:{
              keyword:this.input,
              page:this.currentPage,
              pagesize:this.size,
              time:this.date
            }
          }
        ).then((data) =>{
          if(data.data.errno==0){
            this.total = data.data.data.count;
            this.currentPage = data.data.data.currentPage;
            this.tableData = data.data.data.data;
            console.log(this.tableData);
          }else{
            this.$message.error('获取失败')
          }
        },(err)=> {
          console.log(err);
          this.$message.error('获取失败'+err.message)

        })
      },
      handleSizeChange(size) {
        this.size = size;
        this.getList()
      },

      handleCurrentChange(page) {
        location.href = location.origin+location.pathname+'?page='+page+'&pagesize='+this.size;
      },
      async changeStatus(row){
        console.log(row);
        await axios.post('/userlist/changeStatus',{
          data:{
            id:row.id,
            status:!row.status
          }
        }).then((data)=>{
          if(data.data.errno==0){
            this.$message.success('修改成功')
            row.status = Number(!row.status)
          }else{
            this.$message.error('修改失败')
          }
        },(err)=>{
          console.log(err);
        })
      }
    },

  })
</script>
{% endblock %}

